import { renderer, Types } from "./render.js";
import { onMounted, defineAsyncComponent } from "./component.js";

/* 组件对象 */
// const MyComponent = {
//   name: "MyComponent",
//   /* 必须通过data返回一个对象作为组件的状态，在渲染函数中通过this访问组件的状态 */
//   data() {
//     return {
//       text: "我是组件的状态",
//       name: "我是张三",
//     };
//   },
//   props: {
//     text: String,
//   },
//   render() {
//     return {
//       type: "div",
//       children: `${this.text}，${this.name}`,
//     };
//   },
//   beforeCreate() {
//     console.log("beforeCreate");
//   },
//   created() {
//     console.log("created");
//   },
//   beforeMount() {
//     console.log("beforeMount");
//   },
//   mounted() {
//     console.log("mounted");
//   },
//   beforeUpdate() {
//     console.log("beforeUpdate");
//   },
//   updated() {
//     console.log("updated");
//   },
// };

/* props */

// const MyComponent = {
//   name: "MyComponent",
//   /* 必须通过data返回一个对象作为组件的状态，在渲染函数中通过this访问组件的状态 */
//   data() {
//     return {
//       name: "我是张三",
//     };
//   },
//   props: {
//     text: String,
//   },
//   render(instance) {
//     console.log(instance);
//     return {
//       type: "div",
//       children: `${this.text}，${this.name}`,
//     };
//   },
// };

/* setup函数 */
// const MyComponent = {
//   name: "MyComponent",
//   /* 必须通过data返回一个对象作为组件的状态，在渲染函数中通过this访问组件的状态 */
//   data() {
//     return {
//       name: "张三",
//     };
//   },
//   props: {
//     text: String,
//   },
//   setup(props, { emit }) {
//     emit("change", 1, 2, 3);

//     return function render() {
//       return {
//         type: "div",
//         children: `${props.text}，${this.name}`,
//       };
//     };
//   },

//   // render(instance) {
//   //   console.log(instance);

//   // },
// };

/* slot */

// const MyComponent = {
//   name: "MyComponent",
//   /* 必须通过data返回一个对象作为组件的状态，在渲染函数中通过this访问组件的状态 */
//   data() {
//     return {
//       name: "张三",
//     };
//   },
//   props: {
//     text: String,
//   },
//   setup(props, { emit }) {
//     // return function render() {
//     // return [
//     //   {
//     //     type: "header",
//     //     children: [this.$slots.header()],
//     //   },
//     //   {
//     //     type: "body",
//     //     children: [this.$slots.body()],
//     //   },
//     //   {
//     //     type: "footer",
//     //     children: [this.$slots.footer()],
//     //   },
//     // ];
//     // };
//   },

//   render(instance) {
//     return {
//       type: Types.FRAGEMENT,
//       children: [
//         {
//           type: "header",
//           children: [this.$slots.header()],
//         },
//         {
//           type: "div",
//           children: [this.$slots.body()],
//         },
//         {
//           type: "footer",
//           children: [this.$slots.footer()],
//         },
//       ],
//     };
//   },
// };

/* 注册生命周期函数 */
// const MyComponent = {
//   name: "MyComponent",
//   /* 必须通过data返回一个对象作为组件的状态，在渲染函数中通过this访问组件的状态 */
//   data() {
//     return {
//       name: "张三",
//     };
//   },
//   props: {
//     text: String,
//   },
//   setup(props, { emit }) {
//     onMounted(() => {
//       console.log("onMounted");
//     });
//     onMounted(() => {
//       console.log("onMounted1");
//     });
//     // return function render() {
//     // return [
//     //   {
//     //     type: "header",
//     //     children: [this.$slots.header()],
//     //   },
//     //   {
//     //     type: "body",
//     //     children: [this.$slots.body()],
//     //   },
//     //   {
//     //     type: "footer",
//     //     children: [this.$slots.footer()],
//     //   },
//     // ];
//     // };
//   },

//   render(instance) {
//     return {
//       type: Types.FRAGEMENT,
//       children: [
//         {
//           type: "header",
//           children: [this.$slots.header()],
//         },
//         {
//           type: "div",
//           children: [this.$slots.body()],
//         },
//         {
//           type: "footer",
//           children: [this.$slots.footer()],
//         },
//       ],
//     };
//   },
// };

// /* 虚拟DOM节点 */
// const vnode = {
//   type: MyComponent,
//   children: {
//     header() {
//       return {
//         type: "h1",
//         children: "我是标题",
//       };
//     },
//     body() {
//       return {
//         type: "section",
//         children: "我是内容",
//       };
//     },
//     footer() {
//       return {
//         type: "footer",
//         children: "我是页脚",
//       };
//     },
//   },
// };

// renderer.render(vnode, document.getElementById("app"));

/* 异步组件 */

// const ErrorComponent = {
//   name: "ErrorComponent",
//   props: {
//     error: String,
//   },
//   render() {
//     return {
//       type: "div",
//       children: `${this.props.error}`,
//     };
//   },
// };

// const LoadingComponent = {
//   name: "LoadingComponent",
//   setup() {
//     return () => {
//       return {
//         type: "div",
//         children: "Loading...",
//       };
//     };
//   },
// };

// const component = defineAsyncComponent({
//   loader: () => import("./myComponent.js"),
//   timeout: 0,
//   errorComponent: ErrorComponent,
//   loadingComponent: LoadingComponent,
//   onError: (retry, fail, retries) => {
//     if (retries < 5) {
//       retry();
//     } else {
//       fail();
//     }
//   },
// });

// console.log(component);

// const vnode = {
//   type: component,
// };

// renderer.render(vnode, document.getElementById("app"));

/* 函数式组件 */
function MyComponent() {
  console.log(this);
  return {
    type: "div",
    children: `我是函数式组件${this.message}`,
  };
}

MyComponent.props = {
  message: String,
};

const vnode = {
  type: MyComponent,
  props: {
    message: "hello world",
  },
};

renderer.render(vnode, document.getElementById("app"));
